<template>
    <div>
        <el-form :model="file">
            <div style="margin: 50px">
                <div style="margin-top: -2%;margin-bottom: 8px;color: #ff6a4a">1-3个工作日管理员审核后即可上传到列表中</div>
                <el-button class="btn-upload" type="primary" @click="handleUpdate">上传文件</el-button>
            </div>
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
            >

			<span>
				<el-upload class="upload-demo"
                           ref="upload"
                           drag
                           multiple
                           :data="file"
                           action="/personnel/emp/upload"
                           :auto-upload="false"
                           :limit="5"
                           :on-success="handleFilUploadSuccess"
                           :on-remove="handleRemove"
                >
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只能上传 Excel 文件，且不超过500kb</div>
				</el-upload>
			</span>
                <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleUpload">确 定</el-button>
			</span>
            </el-dialog>
        </el-form>


        <div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 45%">
                <el-table-column
                        prop="fileName"
                        label="文件名"
                        width="500">
                </el-table-column>
                <el-table-column
                        label="操作"
                        >
                    <template slot-scope="scope">

                        <el-button type="primary" size="mini" round @click="showFile(scope.row)">下载</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>


    export default {
        name: "PerEmp",
        data() {
            return {
                tableData: [],
                file: {},
                dialogVisible: false
            }
        },
        mounted() {
            this.initGetName();
        },
        methods: {
            //获取文件名
            initGetName() {
                this.getRequest("/personnel/emp/GetFile").then(resp => {
                    if (resp) {
                        this.tableData = resp;
                    }
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            // 文件上传成功时的函数
            handleFilUploadSuccess(res, file, fileList) {
                console.log(res, file, fileList)
                this.$message.success("上传成功")
            },
            handleUpdate() {
                this.dialogVisible = true;
            },
            // 处理文件上传的函数
            handleUpload() {
                // console.log(res,file)
                this.$refs.upload.submit();
                this.dialogVisible = false
            },
            showFile(data) {
                this.tableData.fileName=data.fileName;
                this.getRequest('/personnel/emp/download?fileName='+data.fileName).then(resp => {
                    if (resp) {
                        this.initGetName();
                    }
                })


            }
        }
    }

</script>

<style scoped>


</style>